<template>
	<view class="centent">
		<!-- 轮播图 -->
		<view class="g_img">
			<view class="statusBar" :style="{height:StatusBarHeight+'px'}">
			</view>

			<view class="swiper_wrap">
				<!-- 返回首页 -->
				<view class="onHome" @click="onHome" v-if="Cart==1">
					<image src="@/static/home/onHome.png" mode="widthFix" class="home-sty"></image>
				</view>
				<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration"
					@change="onCurrent">
					<swiper-item v-for="(item,index) in goodsPhotoList" @click.stop="onShowImg(goodsPhotoList,index)">
						<view class="swiper-item uni-bg-red">
							<image :src="item" mode="aspectFill" style="height: 100%;width: 100%;"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>


			<view class="current_sty">
				{{current}}/{{goodsPhotoList.length}}
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="g_header">
			<view class="gh_cent">
				<view class="gh_price">
					<cn-money :money="form.storePrice/100" :size="42"></cn-money>
					<view class="discount_price">
						第一件 <span class="discount_des"><cn-money :money="240" :size="34" color="#fff"></cn-money></span>
					</view>

				</view>
				<view class="gh_fx">
					<image src="@/static/fx.png" mode="aspectFill" class="ghfx_sty" @click="share"></image>
				</view>
			</view>

			<!-- 文本 -->
			<view class="gh_nr">
				<view class="gh_title">
					<!-- 汤臣倍健蛋白粉600g礼盒 -->
					{{form.goodsName}}
				</view>
			</view>

			<!-- 文本 -->
			<view class="gh_nr gh_wrap">
				<view class="delivery">
					免配送费
				</view>
				<view class="num_sty">
					<button class="ghbtn_sty" :loading="upCart" :disabled="upCart" @click="onAddCart()">
						加入购物车
					</button>
					<view class="PosTin_num" v-if="form.isBuy==1">
						{{form.num}}
					</view>
				</view>

			</view>
		</view>

		<!-- 商品详情 -->
		<view class="empy_hui"></view>
		<view class="store-sty">
			<view class="store-wrap">
				<view class="store-image">
					<image src="@/static/home/store.png" mode="widthFix"></image>
				</view>
				<view class="store-text">
					{{strotData.title}}
				</view>
			</view>
		</view>
		<view class="empy_hui"></view>
		<view class="gh_footer">
			<view class="gh_footer_title">
				商品详情
			</view>
			<view class="ft_cent" v-html="form.remark">

			</view>

			<view class="gh_empy">

			</view>
		</view>

		<!-- 购物车 -->
		<cart-model ref="GCart" :cartId="storeId" :userId="Info.id" @submit="onSubmit"></cart-model>
	</view>
</template>

<script>
	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare();

	// 引入分享方法
	import appShare, {
		closeShare
	} from "@/utils/share.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		getStatusBarHeight
	} from "@/utils/system.js"
	import {
		goodsModel,
		addCart,
		getCode
	} from "@/api/apis.js"
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				autoplay: true,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				pkid: 0,
				upCart: false,
				Cart: 0, //是否分享来的。分享为1 。默认为0
				current: 1, //当期滑块
				form: {},
				goodsPhotoList: [], //商品图片集合
				strotData: {}, //店铺信息
				StatusBarHeight: 0,
			};
		},
		onLoad(e) {
			this.pkid = e.pkid
			this.Cart = e.cart || 0
			this.onSearch() //查询详情
		},

		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'storeForm']),
		},


		mounted() {
			this.StatusBarHeight = getStatusBarHeight()
		},

		onBackPress({
			from
		}) {
			if (from == 'backbutton') {
				this.$nextTick(function() {
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},

		methods: {
			// 预览图图片
			onShowImg(item, index) {
				uni.previewImage({
					current: index,
					urls: item,
				})
			},
			onSearch() {
				let strotData = this.storeForm.filter(item => {
					if (item.id == this.storeId) {
						return item
					}
				})
				this.strotData = strotData[0] //当前店铺信息
				goodsModel({
					id: this.pkid,
					storeId: this.storeId
				}).then(res => {
					this.form = res.result
					this.goodsPhotoList = JSON.parse(res.result.goodsPhotos)
					console.log(this.goodsPhotoList);
				})
			},
			onCurrent(e) {
				console.log(e);
				this.current = e.detail.current + 1
			},

			last() {
				uni.navigateBack()
			},

			share() {
				let params = {
					id: this.form.id,
					storeId: this.storeId
				}

				getCode(params).then(res => {
					let formDate = {}
					formDate.word = res.result //口令
					formDate.Invitation = this.Info.inviteCode //邀请码
					let text = `
				${this.form.goodsName}
				【到手价】${this.form.storePrice/100}元
				-----------------
				【下载APP】https://sj.mc.com/appdetail/com.jf.lkrj
				【邀请码】*${formDate.Invitation}*
				-----------------
				【复制口令，打卡美传APP购买】
				&${formDate.word}&`
					let shareData = {
						shareContent: text,
						shareImg: "http://qn.kemean.cn//upload/202004/18/1587189024467w6xj18b1.jpg",
						appId: "wxd0e0881530ee4444",
						appPath: "pages/home/home",
						type: 1,
					};

					appShare(shareData, res => {
						console.log("分享成功回调", res);
					});
				})

				// getCode(params).then(res => {
				// 	let formDate = {}
				// 	formDate.word = res.result //口令
				// 	formDate.Invitation = this.Info.inviteCode //邀请码

				// 	let text = `
				// ${this.form.goodsName}
				// 【到手价】${this.form.storePrice/100}元
				// -----------------
				// 【下载APP】https://sj.mc.com/appdetail/com.jf.lkrj
				// 【邀请码】*${formDate.Invitation}*
				// -----------------
				// 【复制口令，打卡美传APP购买】
				// &${formDate.word}&`
				// 	uni.setClipboardData({
				// 		scene: 'WXSceneSession',
				// 		data: text,
				// 		success(res) {
				// 			uni.share({
				// 				provider: "weixin",
				// 				scene: "WXSceneSession",
				// 				type: 1,
				// 				summary: text,
				// 				success: function(res) {
				// 					console.log("success:" + JSON.stringify(res));
				// 				},
				// 				fail: function(err) {
				// 					console.log("fail:" + JSON.stringify(err));
				// 				}
				// 			})
				// 		}
				// 	})
				// })


				// 				let params = {
				// 					id: this.form.id,
				// 					storeId: this.storeId
				// 				}
				// 				getCode(params).then(res => {
				// 					let formDate = {}
				// 					formDate.word = res.result //口令
				// 					formDate.Invitation = this.Info.inviteCode //邀请码
				// 					let text = `
				// ${this.form.goodsName}
				// 【到手价】${this.form.storePrice/100}元
				// -----------------
				// 【下载APP】https://sj.mc.com/appdetail/com.jf.lkrj
				// 【邀请码】*${formDate.Invitation}*
				// -----------------
				// 【复制口令，打卡美传APP购买】
				// &${formDate.word}&`
				// 					uni.setClipboardData({
				// 						data: text,
				// 						success: function() {
				// 							uni.showToast({
				// 								title: '复制成功',
				// 								icon: 'none'
				// 							})
				// 						}
				// 					})
				// 				})
			},

			// 购物车
			onAddCart() {
				this.form.number++;
				this.upCart = true
				let params = {
					"customerId": this.Info.id,
					"goodsId": this.form.id,
					"num": 1,
					"storeId": this.storeId
				}
				// console.log(params);
				addCart(params).then(res => {
					if (res.success) {
						uni.showToast({
							title: '添加购物车成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						this.$refs.GCart.onSearch()
						this.onSearch()
					} else {
						uni.showToast({
							title: '获取失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
						this.$refs.goosList.setItem(item, false)
					}
				}).finally(() => {
					this.upCart = false
				})
			},

			// 去结算
			onSubmit() {
				uni.navigateTo({
					url: "/pages/addOrder/addOrder"
				})
			},

			onHome() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.onHome {
		position: absolute;
		z-index: 2;
		top: 20rpx;
		left: 20rpx;
		width: 75rpx;
		height: 75rpx;
		padding: 18rpx;
		background-color: #F7F7F7;
		border-radius: 50%;

		.home-sty {
			height: 100%;
			width: 100%;
		}

	}

	.centent {
		height: 100%;
		width: 100%;
		// background: #ccc;
	}

	// 轮播图
	.g_img {
		width: 100%;
		height: 750rpx;
		border-radius: 0px 0px 0px 0px;
		position: relative;
		// border-bottom: 1rpx solid #ccc;

		.swiper_wrap {
			position: absolute;
			top: 0;
			width: 100%;
			// height: 750rpx;
			height: 100%;
		}

		.swiper {

			height: 100%;
		}

		.swiper-item {
			display: block;
			height: 100%;
			line-height: 300rpx;
			text-align: center;
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

		// 顶部返回按钮
		.statusBar {}

		.last {
			position: absolute;
			padding: 20rpx;
			left: 48rpx;
			top: 128rpx;

			>image {
				width: 34rpx;
				height: 31rpx;

			}
		}

		// 标签
		.current_sty {
			position: absolute;
			right: 24rpx;
			bottom: 48rpx;
			width: 68rpx;
			height: 36rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 24rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
		}





	}

	// 商品信息
	.g_header {
		width: 100%;
		background: #FFFFFF;
		padding: 32rpx 24rpx;

		.gh_cent {
			display: flex;
			justify-content: space-between;

			.gh_price {
				display: flex;
				align-items: center;

				.discount_price {
					margin-left: 24rpx;
					padding: 6rpx 16rpx;
					background: linear-gradient(90deg, #FC9C36 0%, #FD6E04 100%);
					border-radius: 12rpx;
					color: #F7F7F7;
					font-size: 20rpx;

					.discount_des {
						margin-left: 8rpx;
					}
				}
			}
		}

		.ghfx_sty {
			height: 40rpx;
			width: 84rpx;
		}

		.gh_nr {
			margin-top: 24rpx;

			.gh_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.gh_wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.delivery {
				font-weight: 400;
				font-size: 24rpx;
				color: #7F7F7F;
				font-style: normal;
				text-transform: none;
			}

			.num_sty {
				position: relative;

				.ghbtn_sty {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 234rpx;
					height: 72rpx;
					background: $uni-color-theme;
					border-radius: 60rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.PosTin_num {
					background: $uni-color-theme;
					position: absolute;
					border-radius: 50%;
					text-align: center;
					line-height: 35rpx;
					top: -20%;
					z-index: 9;
					font-size: 20rpx;
					right: 0;
					color: #fff;
					height: 40rpx;
					width: 40rpx;
				}
			}
		}
	}

	.empy_hui {
		height: 32rpx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.store-sty {
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;


		.store-wrap {
			width: 184rpx;
			height: 60rpx;
			background: #FCF7F1;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.store-image {
				width: 36rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.store-text {
				margin-left: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #262626;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	// 商品详情
	.gh_footer {
		margin-top: 16rpx;
		width: 100%;

		.gh_footer_title {
			height: 92rpx;
			width: 100%;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 24rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #262626;
		}

		.ft_cent {
			margin: 0 auto;
			width: 100%;
			min-height: 750rpx;
			overflow-x: auto;


			// background-color: #7F7F7F;
			::v-deep img {
				width: 100%;
				height: auto;
			}
		}

		// 底部留白
		.gh_empy {
			height: 200rpx;
			width: 100%;
		}
	}
</style>